<template>
	<view class="member-wrap">
		<view class="custom-nav-bar">
			<!-- 返回按钮 -->
			<view class="nav-back" @click="goBack">
				<image src="/static/back.png" mode=""></image>
			</view>
			<!-- 页面标题 -->
			<view class="nav-title">会员开通</view>
		</view>
		<div class="member-card">
			<image class="cardbg" :src="cardbgUrl" mode=""></image>
			<div class="member-info">
				<div style="display: flex">
					<image :src="userInfo.avatar" mode="widthFix"></image>
					<div class="user-xinxi">
						<p>{{ userInfo.username }}</p>
						<span>{{ userInfo.vip_name }}</span>
					</div>
				</div>
				<div class="card-info">
					<p>NO.8888 8888</p>
					<span>购买黑卡享受免费发帖</span>
				</div>
			</div>
		</div>
		<div class="card-list">
			<div class="card-num">
				<image src="/static/mine/zuanshi.png" mode="widthFix"></image>
				<p>
					<span>20000</span>
					人已开卡
				</p>
			</div>
			<div class="card-arr">
				<div class="card-item" :class="currentIndex === index ? '.active' : ''"
					v-for="(item, index) in levelList" :key="index" @click="chooseLevel(item, index)">
					<p class="level">{{ item.level_name }}</p>
					<p class="tiaoshu">{{ item.send_num }}条/月</p>
					<p class="price">¥{{ item.price }}</p>
				</div>
			</div>
			<button class="kaitongbtn" @click="openMembership">立即开通</button>
		</div>
		<div class="vip-exclusive">
			<p class="zhuanshu">VIP专属</p>
			<div class="exclist">
				<div class="excitem">
					<image src="/static/mine/vip01.png" mode=""></image>
					<p>专属标签</p>
				</div>
				<div class="excitem">
					<image src="/static/mine/vip02.png" mode=""></image>
					<p>免费发布</p>
				</div>
				<div class="excitem">
					<image src="/static/mine/vip03.png" mode=""></image>
					<p>更多特权</p>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		getUserInfo,
		getLevelList,
		rechargeMember
	} from "@/api/mine.js";
	export default {
		data() {
			return {
				currentIndex: 0,
				currentId: "",
				levelList: [],
				userInfo: {},
				cardbgUrl: this.$Config.HTTP_REQUEST_URL + "/zufang/memberbg.png",
			};
		},
		onLoad() {
			this.getUserInfo();
			this.getLevelList();
		},
		methods: {
			async getUserInfo() {
				const res = await getUserInfo();
				if (res.response.statusCode === 200) {
					console.log(res.data.data, "res.data.data");
					this.userInfo = res.data.data.userinfo;
				}
			},
			async getLevelList() {
				const res = await getLevelList();
				if (res.response.statusCode === 200) {
					console.log(res.data.data, "res.data.data");
					this.levelList = res.data.data;
				}
			},
			chooseLevel(item, index) {
				this.currentIndex = index;
				this.currentId = item.id;
			},
			async openMembership() {
				this.currentId = this.currentId ? this.currentId : this.levelList[0].id;
				const res = await rechargeMember({
					id: this.currentId
				});
				if (res.response.statusCode === 200) {
					console.log(res.data.data, "res.data.data");
					uni.requestPayment({
						provider: "wxpay",
						timeStamp: res.data.data.timeStamp,
						nonceStr: res.data.data.nonceStr,
						package: res.data.data.package,
						signType: res.data.data.signType,
						paySign: res.data.data.paySign,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
							uni.showToast({
								title: "开通成功！",
								icon: "success",
							});
							this.getUserInfo();
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						},
					});
				}
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.member-wrap {
		width: 100%;
		height: 200px;
		background: linear-gradient(193deg, #bdd3f7 0%, #ffffff 100%);
		position: relative;
	}

	.custom-nav-bar {
		height: 50px;
		/* 导航栏高度 */
		display: flex;
		align-items: center;
		color: #000;
		padding: 30px 16px 16px 16px;
		position: relative;
		z-index: 1000;
	}

	.nav-back {
		flex: 0 0 auto;
		cursor: pointer;
		padding: 0 6px;

		image {
			width: 12px;
			height: 24px;
			// padding-left: 16px;
		}
	}

	.nav-title {
		flex: 1 1 auto;
		text-align: center;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 17px;
		color: #000000;
	}

	.member-card {
		.cardbg {
			width: 90%;
			height: 170px;
			left: 5%;
			position: relative;
		}

		.member-info {
			position: absolute;
			top: 60%;
			left: 10%;

			image {
				width: 56px;
				height: 56px;
				margin-right: 10px;
				border-radius: 50%;
			}

			.user-xinxi {
				margin-top: 5px;

				p {
					font-family: PingFangHK, PingFangHK;
					font-weight: 500;
					font-size: 18px;
					color: #222222;
					// margin-top: 5px;
				}

				span {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 13px;
					color: #666666;
				}
			}
		}

		.card-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 50px;
			width: 300px;

			p {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 12px;
				color: #296095;
			}

			span {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 10px;
				color: rgba(41, 96, 149, 0.65);
			}
		}
	}

	.card-list {
		width: 90%;
		padding: 20px;
		background-color: #ffffff;

		// margin-top: 100px;
		// padding-top: 100px;
		.card-num {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 10px 0;

			image {
				width: 20px;
				height: 20px;
				margin-right: 5px;
			}

			p {
				font-size: 13px;
				color: #222222;

				span {
					color: #0095f8;
				}
			}
		}

		.card-arr {
			display: flex;
			justify-content: space-between;
		}

		.active {
			background: rgba(0, 149, 248, 0.1);
			border: 1px solid #0095f8;
		}

		.card-item {
			width: 104px;
			height: 131px;
			background: #f5f6fa;
			border-radius: 8px;
			text-align: center;

			.level {
				width: 72px;
				height: 20px;
				background: #0095f8;
				border-radius: 0px 0px 10px 10px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 13px;
				color: #ffffff;
				text-align: center;
				line-height: 20px;
				margin: 0 auto;
			}

			.tiaoshu {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 16px;
				color: #222222;
				margin: 21px 0 12px 0;
			}

			.price {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 24px;
				color: #0095f8;
			}
		}

		.kaitongbtn {
			width: 335px;
			height: 44px;
			background: #0095f8;
			box-shadow: 0px 2px 4px 0px rgba(0, 149, 248, 0.5);
			border-radius: 22px;
			margin: 56px auto 0 auto;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 15px;
			color: #ffffff;
			text-align: center;
			line-height: 44px;
		}
	}

	.vip-exclusive {
		// width: 100%;
		background-color: #ffffff;
		margin-top: 12px;
		padding: 12px 50px 24px 50px;

		.zhuanshu {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 16px;
			color: #333333;
			text-align: center;
			padding-bottom: 20px;
		}

		.exclist {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.excitem {
				text-align: center;

				image {
					width: 40px;
					height: 40px;
				}

				p {
					font-weight: 400;
					font-size: 12px;
					color: rgba(102, 102, 102, 0.9);
				}
			}
		}
	}
</style>